<template>
  <div class="home-container" ref="container" @wheel="handleWheel" v-loading="loading">
    <!-- 轮播图 -->
    <ul
      class="slide"
      ref="slide"
      :style="{
        marginTop: marginTop + 'px',
      }"
      @transitionend="handleTransitionend"
    >
      <li v-for="item in data" :key="item.id">
        <Carouselitem :item="item" />
      </li>
    </ul>

    <!-- 小圆点 -->
    <ul class="dot">
      <li
        v-for="(item, i) in data"
        :key="item.id"
        :class="{ active: index == i }"
        @click="handleClick(i)"
      ></li>
    </ul>
    <!-- 上箭头 -->
    <a class="icon arrowUp" @click="handlePrev" v-show="index">
      <Icon type="arrowUp" />
    </a>
    <!-- 下箭头 -->
    <a
      class="icon arrowDown"
      @click="handleNext"
      v-show="index != data.length - 1"
    >
      <Icon type="arrowDown" />
    </a>
  </div>
</template>

<script>
import { getBanners } from "@/api/index.js";
import Carouselitem from "./Carouselitem.vue";
import Icon from "@/components/Icon";

import {mapState} from "vuex";

export default {
  name: "Home",

  data() {
    return {
      index: 0, //当前轮播图索引
      containerHeight: 0, //容器高度
      switching: false, //是否正在翻页中
    };
  },

  created(){
    this.$store.dispatch('banner/fetchBanner');
  },
  components: {
    Carouselitem,
    Icon,
  },

  mounted() {
    this.containerHeight = this.$refs.container.clientHeight;
    window.addEventListener("resize", this.getContainerHeight);
  },

  destroyed(){
      window.removeEventListener('resize',this.getContainerHeight)
  },

  computed: {
    marginTop() {
      return -this.index * this.containerHeight;
    },
     ...mapState('banner',['loading','data'])
  },

  methods: {
    async fetchData(){
      return await getBanners();
    },
    handlePrev() {
      if (this.index == 0) {
        return;
      }
      this.index--;
    },
    handleNext() {
      if (this.index >= this.banners.length - 1) {
        return;
      }
      return this.index++;
    },
    handleClick(newIndex) {
      this.index = newIndex;
    },
    handleWheel(e) {
      if (this.switching || (e.deltaY > -5 && e.deltaY < 5)) {
        return;
      }
      if (e.deltaY < -5 && this.index != 0) {
        this.switching = true; //正在翻页
        this.index--;
      } else if (e.deltaY > 5 && this.index != this.banners.length - 1) {
        this.switching = true; //正在翻页
        this.index++;
      }
    },
    handleTransitionend() {
      this.switching = false;
    },
    getContainerHeight(){
       this.containerHeight = this.$refs.container.clientHeight; 
    }
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/global.less";

.home-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .slide,
  .slide > li {
    width: 100%;
    height: 100%;
    transition: 0.3s;
  }
  .dot {
    .self-center();
    left: auto;
    right: 20px;
    transform: translateY(-50%);
    li {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: @gray;
      margin: 10px 0;

      &:hover,
      &.active {
        background-color: #fff;
      }
    }
  }
  .icon {
    .self-center();
    color: @gray;
    @gap: 25px;
    &:hover {
      color: #fff;
    }

    &.arrowUp {
      top: @gap;
      animation: jumpUp 2s infinite;
    }
    &.arrowDown {
      top: auto;
      bottom: @gap;
      animation: jumpDown 2s infinite;
    }
    @jump: 5px;
    @keyframes jumpUp {
      0% {
        transform: translateY(@jump);
      }
      50% {
        transform: translateY(-@jump);
      }
      100% {
        transform: translateY(@jump);
      }
    }

    @keyframes jumpDown {
      0% {
        transform: translateY(-@jump);
      }
      50% {
        transform: translateY(@jump);
      }
      100% {
        transform: translateY(-@jump);
      }
    }
  }
}
</style>